<template>
    <div>
        <el-form label-width="200"
                 ref="buyerQC" :model="buyerQueryCondition" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item prop="similarNickName">
                        <el-input v-model.trim="buyerQueryCondition.similarNickName">
                            <template slot="prepend"><span>昵称</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="buyerCode">
                        <el-input v-model="buyerQueryCondition.buyerCode">
                            <template slot="prepend"><span>流水号</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item prop="minCreateDate" label="注册时间从">
                        <el-date-picker v-model="buyerQueryCondition.minCreateDate">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="maxCreateDate" label="至">
                        <el-date-picker v-model="buyerQueryCondition.maxCreateDate">

                        </el-date-picker>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item prop="minMemberBalance">
                        <el-input v-model="buyerQueryCondition.minMemberBalance">
                            <template slot="prepend">余额从</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="maxMemberBalance">
                        <el-input v-model="buyerQueryCondition.maxMemberBalance">
                            <template slot="prepend"> 至</template>
                        </el-input>
                    </el-form-item>
                </el-col>

            </el-row>
            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="queryBuyers(1)">查询
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="resetForm">重置
                </el-button>
                <el-button type="danger" icon="el-icon-check"
                           @click="newTitle">新增
                </el-button>
            </el-form-item>
        </el-form>
        <el-dialog title="新增" :visible.sync="insertVisible">
            <buyer-desc :open-state="insertMode" @refresh="queryBuyers(1)"
                        :silent="()=>insertVisible=false" :noise="()=>insertVisible=true" >
            </buyer-desc>
        </el-dialog>
        <el-table :data="buyerResults"
                  :stripe="true">
            <el-table-column prop="buyerCode" label="流水号"></el-table-column>
            <el-table-column prop="member.nickName" label="昵称"></el-table-column>
            <el-table-column prop="member.balance" label="余额"></el-table-column>
            <el-table-column prop="createDate" label="注册时间"></el-table-column>
            <el-table-column label="操作" width="200" fixed="left">
                <template slot-scope="props">
                    <el-button-group>
                        <el-button type="primary" icon="el-icon-edit"
                                   @click="editSeller(props.row.buyerCode)">编辑
                        </el-button>
                        <el-button type="warning" icon="el-icon-delete"
                                   @click="deleteSeller(props.row)">删除
                        </el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>

        <div class="el-pagination">

            <el-pagination layout="total, prev, pager, next, jumper"
                           :total="total" :current-page="buyerQueryCondition.pageNum"
                           :page-size="buyerQueryCondition.pageSize"
                           @current-change="queryBuyers">

            </el-pagination>
        </div>
        <el-dialog title="修改页面" :visible.sync="updateVisible">
            <buyer-desc ref="updateBuyer" :open-state="updateMode" @refresh="queryBuyers(1)"
                        :silent="()=>updateVisible=false" :noise="()=>updateVisible=true">
            </buyer-desc>
        </el-dialog>
    </div>

</template>

<script>
    import BuyerDesc from '../components/BuyerDesc';


    export default {
        components:{
            BuyerDesc,
        },
        data: function () {
            return {
                buyerQueryCondition: {
                    similarNickName: "",
                    buyerCode: "",
                    maxCreateDate: null,
                    minCreateDate: null,
                    maxMemberBalance: null,
                    minMemberBalance: null,
                    pageNum: 1,
                    pageSize: 3,
                },
                /*{
                "limit": 3,
                "offset": 0,
                "total": 16,
                "results": []
                */
                buyerResults: [{
                    id: 14,
                    buyerCode: "Buyer_888489",
                    member: {
                        balance: 587,
                        nickName: "李_16"
                    },
                    createDate: ""
                }],
                total: 0,
                insertMode:0,
                updateMode:1,
                insertVisible:true,
                updateVisible:true,


            }
        },
        computed: {},
        methods: {
            editSeller: function (code) {
                this.$refs['updateBuyer'].init(code);

            },

            deleteSeller: function (result) {
                //todo
                this.$message.warning(JSON.stringify(result));
            },
            queryBuyers: function (val) {
                if (val) this.buyerQueryCondition.pageNum = val;
                //todo
                this.$http({
                    method:'post',
                    url:'http://localhost:8899/buyers',
                    data:this.buyerQueryCondition,
                }).then(res => {
                    this.total =res.data.total;
                    this.buyerResults = res.data.results;
                }).catch(this.$message.warning(JSON.stringify()));
            },
            resetForm: function () {
                this.$refs['buyerQC'].resetFields();
            },
            newTitle: function () {
                this.insertVisible=true;
            },



        },

        mounted: function () {
            this.updateVisible=false;
            this.queryBuyers(1);
        },

        created: function () {
            this.insertVisible=false;

        },
        name: "Buyer"
    }
</script>

<style scoped>

</style>
